import React, { Component } from 'react'

import './css/index.css'

import Film from './Film'
import Cinema from './Cinema'
import Center from './Center'

export default class App extends Component {
  state = {
    buttons: [
      {
        id: 1,
        name: '电影',
      },
      {
        id: 2,
        name: '影院',
      },
      {
        id: 3,
        name: '我的',
      },
    ],
    currentIndex: 0,
  }
  render() {
    return (
      <div>
        {/* {this.state.currentIndex === 0 && <Film></Film>}
        {this.state.currentIndex === 1 && <Cinema></Cinema>}
        {this.state.currentIndex === 2 && <Center></Center>} */}

        {/* 支持函数表达式 */}
        {this.whichComponent()}
        <ul className='tabbar'>
          {this.state.buttons.map((item, index) => {
            return (
              <li
                key={item.id}
                className={this.state.currentIndex === index ? 'active' : ''}
                onClick={() => this.handleClick(index)}
              >
                {item.name}
              </li>
            )
          })}
        </ul>
      </div>
    )
  }

  handleClick = (index) => {
    this.setState({ currentIndex: index })
  }

  whichComponent = () => {
    switch (this.state.currentIndex) {
      case 0:
        return <Film></Film>
      case 1:
        return <Cinema></Cinema>
      case 2:
        return <Center></Center>
      default:
        return null
    }
  }
}
